<template>
	<view class="mt-2" style="width: 100%;">
		<uni-file-picker v-model="imageList" file-mediatype="image" mode="grid" file-extname="png,jpg" :limit="limit"
			:autoUpload="false" @select="select" @delete="handlerDelete" />
		<slot name="title">
			<text v-if="headTitle" class="font-md mt-2">{{headTitle}}</text>
		</slot>
	</view>
</template>

<script>
	import validate from "@/utils/validate.js"
	export default {
		props: {
			headTitle: String,
			limit: Number,
			imageValue: Array
		},
		data() {
			return {
				imageList: []
			}
		},
		watch: {
			imageValue: {
				deep: true,
				handler(value) {
					if (value && value.length > 0) {
						this.imageList = []
						this.imageList.push({
							name: value[0].url + ".png",
							extname: "png",
							url: value[0].url
						})
					}else {
						this.imageList = []
					}
				}
			}
		},
		methods: {
			select(e) {
				let _that = this
				// 选择文件后触发
				if (validate.handleBeforeUpload(e.tempFiles[0])) {
					
					// 上传图片到服务器
					uni.uploadFile({
						url: getApp().globalData.baseUrl + `/supplier_applet_api.php?act=fileUploads`, // 服务器上传接口
						filePath: e.tempFilePaths[0],
						name: 'file', // 必须填写，后台用来接收文件
						formData: {
							'user_id': uni.getStorageSync('USER_ID') // 其他POST请求中的额外参数
						},
						success: function(uploadFileRes) {
							_that.$emit('imgurl', JSON.parse(uploadFileRes.data).info)
						},
						fail: function(uploadFileErr) {
							console.log(uploadFileErr); // 上传失败后的操作
						}
					});
				}else{
					this.imageList = []
				}


			},
			handlerDelete(e) {
				this.imageList = []
				this.$emit('imgurl', "")
			}
		}
	}
</script>

<style>

</style>